import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useGame } from '../contexts/GameContext';

const factions = [
  { id: 'ming', name: '大明', color: '#e63946', advantages: '防御工事自动修复' },
  { id: 'mongol', name: '蒙古', color: '#457b9d', advantages: '骑兵无视地形惩罚' },
  { id: 'korea', name: '朝鲜', color: '#a8dadc', advantages: '弓箭手射程+20%' },
  { id: 'japan', name: '倭国', color: '#1d3557', advantages: '夜间战斗力+30%' },
];

const FactionSelectScreen = ({ navigation }) => {
  const [selectedFaction, setSelectedFaction] = useState(null);
  const { dispatch } = useGame();

  const handleSelect = (faction) => {
    setSelectedFaction(faction);
    dispatch({
      currentPlayer: {
        id: 'player1',
        name: '玩家1',
        faction: faction,
        isCommander: true
      },
      gamePhase: 'setup'
    });
    // 这里将添加蓝牙广播选择的阵营
    navigation.navigate('Game', { faction });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>选择你的阵营</Text>
      <Text style={styles.subtitle}>每个阵营都有独特优势</Text>
      
      <View style={styles.factionContainer}>
        {factions.map((faction) => (
          <TouchableOpacity
            key={faction.id}
            style={[
              styles.factionButton,
              { backgroundColor: faction.color },
              selectedFaction?.id === faction.id && styles.selectedFaction
            ]}
            onPress={() => handleSelect(faction)}
          >
            <Text style={styles.factionText}>{faction.name}</Text>
            <Text style={styles.advantageText}>{faction.advantages}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
  },
  factionContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
  },
  factionButton: {
    width: '40%',
    aspectRatio: 1,
    margin: 10,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 3,
  },
  selectedFaction: {
    borderWidth: 3,
    borderColor: '#f1faee',
  },
  factionText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  }
});

export default FactionSelectScreen;
